<template>
  <div ref="containerRef" id="model-show"></div>
</template>

<script setup>
import {
  ref,
  onMounted,
  defineExpose,
  nextTick,
  onUnmounted,
  onBeforeUnmount,
} from "vue";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import * as THREE from "three";
import Viewer from "@/common/threeModules/Viewer";
import Lights from "@/common/threeModules/Lights";
import Labels from "@/common/threeModules/Labels";
import ModelLoader from "@/common/threeModules/ModelLoader.js";
import Pipes from "@/common/threeModules/Pipes.js";
import { initModelData } from "@/components/model/initData.js";
import gsap from "gsap";

const props = defineProps({
  factoryId: {
    type: String,
    default: "",
  },
});
const containerRef = ref(null);
let viewer = null;
let modelLoader = null;
let pipeLoader = null;
let transform = null;
let labelIns = null; // 标签实例

const initScene = () => {
  viewer = new Viewer(containerRef.value);
  viewer.camera.position.set(107, 45, 200);
  viewer.orbitControl.maxPolarAngle = Math.PI / 2.1; // 限制orbitControl的上下角度范围

  viewer.renderer.shadowMap.enabled = true;
  viewer.renderer.shadowMap.type = THREE.PCFSoftShadowMap;

  const lights = new Lights(viewer);
  const ambientLight = lights.addAmbientLight(); // 添加环境光
  ambientLight.setOption({
    color: 0xffffff,
    intensity: 1, // 环境光强度
  });
  ambientLight.light.name = "AmbientLight";
  // 添加平行光
  lights.addDirectionalLight([100, 100, 100], {
    color: "rgb(253,253,253)",
    intensity: 4.4,
    castShadow: true, // 是否投射阴影
  });
  lights.addDirectionalLight([-100, -100, 100], {
    color: "rgb(253,253,253)",
    intensity: 4.4,
    castShadow: true, // 是否投射阴影
  });
  lights.addDirectionalLight([-100, 100, -100], {
    color: "rgb(253,253,253)",
    intensity: 4.4,
    castShadow: true, // 是否投射阴影
  });
  lights.addDirectionalLight([100, -100, -100], {
    color: "rgb(253,253,253)",
    intensity: 4.4,
    castShadow: true, // 是否投射阴影
  });

  modelLoader = new ModelLoader(viewer);
  labelIns = new Labels(viewer);
  pipeLoader = new Pipes(viewer);
};

const initData = () => {
  initModelData(
    props.factoryId,
    (param) => {
      modelLoader.loadModelToScene(param, (model) => {
        model.openCastShadow();
      });
    },
    (points) => {
      pipeLoader.loadPipe(points);
    },
    (tag) => {
      const { positionX, positionY, positionZ, iconName } = tag;
      const uuid = labelIns.addCss3dLabel(
        [positionX, positionY, positionZ],
        iconName,
        `标签`
      ).uuid;
      tag.uuid = uuid;
      labelIns.updateLabelElement(tag);
    },
    (param) => {
      modelLoader.loadModelToScene(param, (model) => {
        model.openCastShadow();
      });
    }
  );
};

const reset = () => {
  gsap.to(viewer.camera.position, {
    x: 107,
    y: 45,
    z: 200,
    duration: 2,
    ease: "Bounce.inOut",
  });
};

const showLabel = (labelVisible) => {
  labelIns.hide(labelVisible);
};

onMounted(() => {
  nextTick(() => {
    initScene();
    initData();
  });
});

defineExpose({
  reset,
  showLabel,
});
</script>

<style lang="scss" scoped>
#model-show {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #f0f0f0;
}
</style>